<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-21 19:08:03
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-23 02:25:23
-->
<template>
    <div>
        <el-form inline="true" ref="payFormRef" :model="payForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="colorBar"></div>
                        <div>新增回款</div>
                    </div>
                </template>
                <div class="mescustomer">
                    <div class="mescustomerleft">
                        <el-form-item label="回款期数" prop="payperiods">
                            <el-select v-model="payForm.payperiods" placeholder="请选择期数" clearable>
                                <el-option label="1" value="one" />
                                <el-option label="2" value="two" />
                                <el-option label="3" value="three" />
                                <el-option label="4" value="four" />
                            </el-select>

                        </el-form-item>

                        <el-form-item label="回款时间" prop="paydate">
                            <div style="width:180px">
                                <el-date-picker v-model="payForm.paydate" type="date" placeholder="请选择回款时间" clearable
                                    style="width:100%" />
                            </div>
                        </el-form-item>

                        <el-form-item label="回款方式" prop="paymethode">
                            <el-select v-model="payForm.paymethode" placeholder="请选择跟进状态" clearable>
                                <el-option label="微信" value="WeChat" />
                                <el-option label="支付宝" value="Alipay" />
                                <el-option label="银行卡" value="bank card" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="回款金额" prop="paymenoy">
                            <el-input v-model="payForm.paymenoy" placeholder="请输入回款金额" clearable />
                        </el-form-item>
                        <el-form-item label="回款比例" prop="payproportion">
                            <el-input v-model="payForm.payproportion" placeholder="自动同步" clearable disabled />
                        </el-form-item>

                    </div>
                    <div class="mescustomerright">
                        <el-form-item label="收款人" prop="payname">
                            <el-select v-model="payForm.payname" placeholder="请选择跟进状态" clearable>
                                <el-option label="张三" value="zhangsan" />
                                <el-option label="李四" value="lisi" />
                                <el-option label="王五" value="wangwu" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label=" 逾期天数" prop="payday">
                            <el-input v-model="payForm.payday" placeholder="自动同步" clearable disabled />
                        </el-form-item>
                        <el-form-item label="通知人员" prop="paynotice">
                            <el-select v-model="payForm.paynotice" placeholder="请选择跟进状态" clearable>
                                <el-option label="张三" value="zhangsan" />
                                <el-option label="李四" value="lisi" />
                                <el-option label="王五" value="wangwu" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="跟进内容" prop="paytext" class="textArea">
                            <el-input v-model="payForm.paytext" type="textarea" placeholder="请输入备注" />
                        </el-form-item>
                    </div>
                </div>
            </el-card>
            <el-card class="buttonItem">
                <el-button type="primary" :loading="loading" @click="saveForm">保存</el-button>
                <el-button type="primary" @click="cancelSave">取消</el-button>
            </el-card>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus"
import { onMounted, reactive, ref } from "vue"
import { useCustomerIdInfo } from "../minehooks"
import { userCustomerFollowIDUpApi, userCustomerFollowUpApi, userCustomerEditApi, userCustomerendApi } from "@/services/customer";
import { successMessage } from "@/utils/Tools/successMessage";
import { errorMessage } from "@/utils/Tools/errorMessage";
import { provinceAndCityData, regionData } from 'element-china-area-data';
import type { ICustomerData } from "@/types/customer";

const provinceAndCityDataRef = ref(provinceAndCityData);
const regionDataRef = ref(regionData);
const payFormRef = ref<FormInstance>()
const payForm = ref({
    payperiods: "",
    paydate: "",
    paymethode: "",
    paymenoy: "",
    payproportion: "",
    payname: "",
    payday: "",
    paynotice: "",
    paytext: "",
})
// 保存
const loading = ref(false)
const saveForm = () => {
    if (!payFormRef.value) return
    loading.value = true
    payFormRef.value.validate(async valid => {
        if (valid) {
            //这儿需要网络请求
            let ret = await userCustomerendApi(payForm)
            if (ret.code === 200) {
                successMessage('新增用户成功', () => {
                    loading.value = false
                }, 1000)
            } else {
                errorMessage('编辑用户异常，请重新提交', () => {
                    loading.value = false
                }, 3000)
            }
        } else {
            errorMessage('表单验证失败', () => {
                loading.value = false
            }, 3000)
        }
    })
}
// 取消
const cancelSave = () => {
    if (!payFormRef.value) return
    payFormRef.value.resetFields()
}

const rules = reactive<FormRules<ICustomerData.IPayAdd>>({
    payperiods: [{ required: true, whitespace: true, message: '回款期数不能为空', trigger: 'blur' }],
    paydate: [
        { required: true, message: '回款时间不能为空', trigger: 'blur' },
    ],
    paymethode: [
        { required: true, whitespace: true, message: '回款方式不能为空', trigger: 'blur' },
    ],
    paymenoy: [{ required: true, whitespace: true, message: '回款金额不能为空', trigger: 'blur' },],
    payname: [{ required: true, whitespace: true, message: '收款人不能为空', trigger: 'blur' },],
    paynotice: [{ required: true, whitespace: true, message: '通知人员不能为空', trigger: 'blur' },],
})
</script>

<style lang="scss" scoped>
.mescustomer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;

    .mescustomerleft {

        width: 50%;
        height: 100%;
        // background-color: red;
    }

    .mescustomerright {
        width: 50%;
        height: 100%;
        // background-color: blue;
    }

}

.boxHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-card {
    margin-bottom: 20px;


    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;

        .card-header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }
        }


    }

}

.el-form-item {

    .el-input,
    .el-select,
    .el-date-picker,
    .el-date-editor.el-input,
    .el-form-item__content {
        width: 180px !important;
        margin-right: 20px; // Add margin between input fields if needed
    }
}

.textArea {
    width: 96%;
}

.el-date-picker {
    width: 180px !important;
}

.buttonItem {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-button {
        margin: 0 10px; // Adjust margin as needed
    }
}

.textArea {
    width: 100%;
    margin-top: 40px;

}
</style>